html,
body {
  height: 100%;
}

#app {
  min-height: 100%;
  background-color: #0f172a;
  color: #94a3b8;
}

#main {
  margin: 0 calc(400px + 100% - 100vw) 0 350px;
  padding-top: 55px;
  min-width: 786.5px;
  --el-main-padding: 0 7px 0 !important;
}

//双伪元素实现清除浮动
.clearFloat {
  &::after,
  &::before {
    content: '';
    display: table;
  }

  &::after {
    clear: both;
  }
}

/* 悬浮边框样式 */
.floating-border {
  background-color: #1e293b;
  border-radius: 15px;
}

/* 悬浮, 光标变成小手 */
.hover-pointer {
  &:hover {
    cursor: pointer;
  }
}

/* 菜单通用样式 */
.menu {
  border: none !important;
  background-color: #1e293b !important;
  font-weight: bold;
}

/* 菜单项通用样式 */
.menu-item {
  border: none !important;
  --el-menu-text-color: #94a3b8 !important;
  --el-menu-hover-bg-color: transparent !important;
}

/* 小按钮通用样式 */
.small-button {
  border: none !important;
  /* 按钮背景色 */
  --el-button-bg-color: transparent !important;
  /* 按钮悬浮背景色 */
  --el-button-hover-bg-color: #334155 !important;

  // 字体图标
  i {
    color: #94a3b8;
  }

  // button中的字体
  span {
    font-weight: bold;
    color: #94a3b8;
  }
}

/* 头像样式 */
.avatar {
  float: left;
  width: 50px;
  height: 50px;
  border-radius: 9px;

  &:hover {
    cursor: pointer;
  }
}

/* element-plus的输入框的背景颜色 */
.el-input {
  --el-input-bg-color: #1e293b !important;
  --el-input-border-color: transparent !important;
  --el-input-focus-border-color: #c0c4cc !important;
}

// markdown编辑器的公共样式
.markdown {
  --md-bk-color: #1e293b !important;
  --md-color: #94a3b8 !important;
  --md-border-color: transparent !important;
  border-radius: 10px;

  h1 {
    font-size: 2rem;
  }
}

// markdown编辑器的特有样式
.markdown-editor {
  min-height: 620px !important;
  max-height: 100%;

  .md-toolbar-wrapper .md-toolbar {
    min-width: 768px !important;
  }
}

// markdown编辑器的预览样式 preview-theme="preview"
.preview-theme {
  padding: 10px !important;
}
